<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=375,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			body {
				width: 100vw;
			}

			.main {
				width: 375px;
				margin: 0 auto;
			}
			.playbtn{
				width: 80px;
				height: 80px;
				background-color: rgba(0,0,0,0.4);
				position: absolute;
				left: calc(50% - 40px);
				top:calc(50% - 40px);
				background-image: url(img/play.png);
				background-size: 70% 70%;
				background-position: center;
				background-repeat: no-repeat;
			}
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.alert{
				width: 100vw;
				height: 100vh;
				position: fixed;
				left: 0;
				top: 0;
				z-index: 10000;
				background-color: rgba(0,0,0,0.8);
			}
			.alert video{
				width: 100vw;
				height: 100vh;
				position: absolute;
				left: 0;
				top: 0;
				
			}
			.alert .header{
				position: relative;
				z-index: 10;
			}
			
			.alert .close{
				cursor: pointer;
				width: 50px;
				height: 50px;
				position: absolute;
				right: 10vw;
				top: 0;
				font-size: 25px;
				line-height: 50px;
				text-align: center;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<script src="js/jquery-1.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="main">
			<div class="content"></div>
			<div class="content"></div>
			<div class="content"></div>
			<!-- 			<div class="mui-card">
				<div class="mui-card-header mui-card-media">
					<div class="mui-card-media-object mui-pull-left">
						<img src="../images/logo.png" width="34px" height="34px" />
					</div>
					<div class="mui-card-media-body">
						小M
						<p class="mui-ellipsis">发表于 6小时前</p>
					</div>
				</div>
				<div class="mui-card-content mui-card-media" style="height:40vw;background-image:url(../images/yuantiao.jpg)"></div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Comment</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div> -->
		</div>

		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon mui-icon-image"></span>
				<span class="mui-tab-label">图片</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">段子</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">视频</span>
			</a>
		</nav>
		<script type="text/javascript">
			$(function() {
				$('.mui-tab-item').click(function() {
					var index = $(this).index()
					console.log(this)
					$('.content').fadeOut(300).eq(index).fadeIn(300);
				})
				var httpUrl = "https://api.apiopen.top/getJoke"
				var options1 = {
					page: 1,
					count: 10,
					type: "image"
				}
				var options2 = {
					page: 1,
					count: 10,
					type: "text"
				}
				var options3 = {
					page: 1,
					count: 10,
					type: "video"
				}
				$.get(httpUrl, options1).then(function(res) {
					console.log(res)
					res.result.forEach(function(item, index) {
						let htmlContent =
							`
				<div class="mui-card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-card-media-object mui-pull-left">
							<img src="${item.header}" width="34px" height="34px" />
						</div>
						<div class="mui-media-body">
							${item.name}
							<p>发表于 ${item.passtime}</p>
						</div>
					</div>
					<div class="mui-card-content">
						<img src="${item.images}" alt="" width="100%">
					</div>
					<div class="mui-card-footer">
						<a class="mui-card-link">喜欢</a>
						<a class="mui-card-link">评论</a>
						<a class="mui-card-link">转发</a>
					</div>
				</div>
				`
						$('.content:eq(0)').append(htmlContent)
					})
				})
				$.get(httpUrl, options2).then(function(res) {
					console.log(res)
					res.result.forEach(function(item, index) {
						let htmlContent =
							`
				<div class="mui-card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-card-media-object mui-pull-left">
							<img src="${item.header}" width="34px" height="34px" />
						</div>
						<div class="mui-media-body">
							${item.name}
							<p>发表于 ${item.passtime}</p>
						</div>
					</div>
					<div class="mui-card-content">
						<p>${item.text}</p>
					</div>
					<div class="mui-card-footer">
						<a class="mui-card-link">喜欢</a>
						<a class="mui-card-link">评论</a>
						<a class="mui-card-link">转发</a>
					</div>
				</div>
				`
						$('.content:eq(1)').append(htmlContent)
					})
				})
				$.get(httpUrl, options3).then(function(res) {
					console.log(res)
					res.result.forEach(function(item, index) {
						let htmlContent =
							`
				<div class="mui-card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-card-media-object mui-pull-left">
							<img src="${item.header}" width="34px" height="34px" />
						</div>
						<div class="mui-media-body">
							${item.name}
							<p>发表于 ${item.passtime}</p>
						</div>
					</div>
					<div class="mui-card-content">
						<img src="${item.thumbnail}" width="100%">
						<div class="playbtn" data-index="${index}" data-video="${item.video}"></div>
					</div>
					<div class="mui-card-footer">
						<a class="mui-card-link">喜欢</a>
						<a class="mui-card-link">评论</a>
						<a class="mui-card-link">转发</a>
					</div>
				</div>
				`
						$('.content:eq(2)').append(htmlContent)
					})
					$('.playbtn').click(function(){
						var index = $(this).attr('data-index')
						var video = $(this).attr('data-video')
						$('body').append(
							`
							<div class="alert">
								<div class="header"><span class="close"><span class="mui-icon mui-icon-closeempty"></span></span></div>
								<div class="mainVideo">
									<video src="${video}" controls="controls" autoplay="autoplay" /> 
								</div>
							</div>
							`
						)
						$('.alert').click(function(){
							$('.alert').remove()
						})
					})
				})
			})
		</script>
	</body>
</html>
